<%@ page import="com.example.entity.User" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="com.example.utils.DButil" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="com.example.dao.impl.UserDaoimpl" %>
<%@ page import="com.example.entity.UserImage" %>
<%@ page import="com.example.entity.UserName" %>
<%@ page import="com.example.controller.LoginServlet" %>
<%@ page import="com.example.controller.MessageServlet" %>
<%@ page import="java.sql.Connection" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>编辑资料</title>
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'><!-- 图标 -->

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
            href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
            rel="stylesheet">
    <link rel="stylesheet" href="./css/移动端页面功能.css">
</head>
<style>
    * {
        box-sizing: border-box;
    }

    img {
        width: 50px;
        height: 50px;
        object-fit: cover;
    }

    .EditorTd {
        display: flex;
        justify-content: left;
    }

    p {
        margin: 0px;
        padding: 0px;
        padding-left: 20px;
    }

    b {
        position: absolute;
        right: 10px;
    }

    .s {
        cursor: pointer;
    }


    h2 {
        margin-left: 0px;
        padding-left: 0px;
    }

    /*.duihua {*/
    /*    display: none;*/
    /*    !*background-color: #fff;*!*/
    /*}*/

    /*.duihua h1 {*/
    /*    margin: 0px;*/
    /*    text-align: center;*/
    /*}*/

    .input {
        position: fixed;
        top: 97%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        background-color: #f8f9fa;
        width: 100%;
        height: auto;
        padding: 10px;
        /*border-radius: 5px;*/
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        align-items: center;
        justify-content: center;
    }

    .input input[type="text"] {
        flex: 1;
        height: 40px;
        margin-right: 10px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

    .input button {
        border-radius: 3px;
        border: 0px;
        background-color: #007bff;
        color: #fff;
        height: 40px;
        padding: 0 20px;
        cursor: pointer;
    }

    .input button:hover {
        background-color: #0056b3;
    }

    /*.duihua .text {*/
    /*    padding-top: 20px;*/
    /*    width: 100%;*/
    /*    height: 90vh;*/
    /*    background-color: #f8f9fa;*/
    /*    padding-bottom: 20px;*/
    /*    overflow: scroll;*/


    /*}*/

    p {
        display: flex;
        height: 50px;
        background-color: #fff;
        padding-left: 0px;
        border: 1px solid #000;
        border-radius: 10px;
        align-items: center;

    }

    .right {
        display: flex;
        padding-left: 0px;
        justify-content: flex-end;
        /* 添加这一行来使内容靠右对齐 */
        align-items: center;
        /* 保持垂直居中 */
    }

    .right chat-bubble {
        margin-right: 0px;
    }

    .left {
        display: flex;
        padding-left: 0px;

        justify-content: flex-start;
        /* 添加这一行来使内容靠右对齐 */
        align-items: center;
        /* 保持垂直居中 */
    }

    .left chat-bubble {
        margin-left: 20px;
    }


    /* 聊天气泡公共样式 */
    .chat-bubble {
        padding: 10px 5px 10px;
        /* border-radius: 25px; */
        max-width: 80%;
        /* margin-bottom: 10px; */
        font-size: 16px;
        line-height: 1.5;
        position: relative;
    }

    /* 左边对齐的聊天气泡 */
    .chat-bubble.left {
        background-color: #e6e6e6;
        float: left;
        margin-left: 10px; /* 根据需要调整边距 */
        text-align: right;
        padding-left: 5px !important;
    }

    /* 右边对齐的聊天气泡 */
    .chat-bubble.right {
        background-color: #007bff;
        color: white;
        float: right;
        margin-right: 10px; /* 根据需要调整边距 */
        padding-left: 5px !important;
    }

    /* 聊天气泡尾部 */
    .chat-bubble::before {
        content: "";
        position: absolute;
        bottom: 0;
        width: 0;
        height: 0;
        border-style: solid;
    }

    /* 左边对齐聊天气泡的尾部 */
    .chat-bubble.left::before {
        left: -12px;
        border-width: 12px 12px 12px 0;
        border-color: transparent #e6e6e6 transparent transparent;

        transform: translate(4px, -10px);

    }

    /* 右边对齐聊天气泡的尾部 */
    .chat-bubble.right::before {
        right: -12px;
        border-width: 12px 0 12px 12px;
        border-color: transparent transparent transparent #007bff;

        transform: translate(-4px, -10px);

    }
</style>
<body>
<%
    User user = (User) request.getSession().getAttribute("user");
    int right = user.getUserId();
    int left = 0;


    session.setAttribute("touserid", new UserDaoimpl().findByUsername(request.getParameter("username")).getUserId());
    if (session.getAttribute("touserid") != null) {
        PreparedStatement ps1 = null;
        Connection con = DButil.getConnection();
        ResultSet rs1 = null;

        left = (int) session.getAttribute("touserid");
//        System.out.println(left);
        UserImage userImage = null;
        UserDaoimpl userDaoimpl = new UserDaoimpl();
        userImage = userDaoimpl.findByUserID(left);//对话头像
        String sql = "select * from liaotian where USERID1 = ? AND USERID2 = ? or USERID2 = ? AND USERID1 = ? ORDER BY DATE";
        try {
            ps1 = con.prepareStatement(sql);
            ps1.setInt(1, right);
            ps1.setInt(2, left);
            ps1.setInt(3, right);
            ps1.setInt(4, left);
            rs1 = ps1.executeQuery();
            while (rs1.next()) {
                String content1 = rs1.getString("CONTENT");
                String className = (rs1.getInt("USERID1") == left) ? "left" : "right";
                String userImageSrc = (rs1.getInt("USERID1") == left) ? userImage.getUserImage() : user.getUserimg();

                out.print("<div class='" + className + "'>");

                // 根据className决定头像的位置
                if (className.equals("left")) {
                    out.print("<img src='" + userImageSrc + "' alt='' />");
                }
                out.print("<div class='chat-bubble " + className + "'>" + content1 + "</div>");

                if (className.equals("right")) {
                    out.print("<img src='" + userImageSrc + "' alt='' />");
                }

                out.print("</div>");
            }
            out.print("<div style='height:100px'></div>");
        } catch (SQLException e) {
            throw new RuntimeException(e);
        }finally {
            DButil.closeResources(con, rs1, ps1);
        }
    }
%>
</body>
<div class="input">
    <input type="text" name="text" required>
    <input name="right" value="<%=right%>" style="display: none">
    <input name="left" value="${touserid}" style="display: none">
    <button onclick="sendmessage()">发送</button>
</div>
<script src="./js/jquery.min.js"></script>
<script>
    function sendmessage() {
        $.ajax({
            url: "message",
            type: "post",
            data: {
                text: $("input[name='text']").val(),
                left: $("input[name='left']").val(),
                right: $("input[name='right']").val()
            },
            success: function (data) {
                console.log(data);
                location.reload();
            }
        })
    }
</script>
</html>

